<script setup lang="ts">
import { ref } from 'vue';

defineOptions({ name: 'AiFramework' });

// 模拟AI框架数据
const frameworkData = ref([
  { name: '昇思MindSpore', status: '已适配', progress: 100 },
  { name: '百度飞桨', status: '已适配', progress: 100 },
  { name: '华为CANN', status: '已适配', progress: 100 },
  { name: '腾讯太极', status: '适配中', progress: 75 },
  { name: '阿里MNN', status: '适配中', progress: 55 },
  { name: '旷视MegEngine', status: '规划中', progress: 0 }
]);
</script>

<template>
  <NCard :bordered="false" class="card-wrapper h-full">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-xl font-semibold flex items-center">
        <SvgIcon icon="mdi-cube-outline" class="mr-2 text-primary" />
        AI框架库支持
      </h3>
      <NBadge type="success" value="3/6" />
    </div>
    <div class="space-y-4">
      <div v-for="framework in frameworkData" :key="framework.name" class="space-y-1">
        <div class="flex items-center justify-between">
          <span>{{ framework.name }}</span>
          <span :class="{ 'text-success': framework.status === '已适配', 'text-warning': framework.status === '适配中', 'text-gray-400': framework.status === '规划中' }">{{ framework.status }}</span>
        </div>
        <NProgress :percentage="framework.progress" :status="framework.status === '已适配' ? 'success' : framework.status === '适配中' ? 'warning' : 'default'" />
      </div>
    </div>
  </NCard>
</template>

<style scoped></style>